<extend name="Public/base"/>
<block name="style">
    <style>
      .addBtn, .delBtn{
        width: 90px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #000;
        border-radius: 5px;
        color: #000;
        background: #eee;
        padding: 5px 10px;
        text-align: center;
        margin-left: 10px;
      }
      .option{
        margin-bottom: 5px;
      }
      .option .radio, .option .checkbox{
        display: block;
        float: left;
        margin: 5px;
      }
      .delBtn{
        cursor: pointer;
      }
    </style>
</block>
<block name="body">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <div class="main-title">
        <h2>{$meta_title}</h2>
    </div>

    <form action="" method="post" class="form-horizontal">
        <!--  题目  -->
        <div class="form-item">
            <label class="item-label">题目</label>
            <div class="controls">
                <textarea name="question" cols="50" rows="10">{$info.question}</textarea>
            </div>
        </div>

        <!--  所属学科  -->
        <div class="form-item">
            <label class="item-label">所属学科</label>
            <div class="controls">
                <select name="sid" class="subject">
                    <option value="0">请选择学科</option>
                    <volist name="subject_list" id="vo">
                        <option value="{$vo.id}" <if condition="$vo['id'] == $info['sid']">selected</if>>{$vo.name}</option>
                    </volist>
                </select>
            </div>
        </div>

        <!--  章节 - 知识点  -->
        <div class="form-item">
            <label class="item-label">章节 - 知识点</label>
            <div class="controls">
                <select name="one_chapter_id" class="one_chapter">
                    <option value="0">请选择章节</option>
                </select>
                <select name="two_chapter_id" class="two_chapter">
                    <option value="0">请选择知识点</option>
                </select>
            </div>
        </div>

        <!--  类型  -->
        <div class="form-item">
            <label class="item-label">类型</label>
            <div class="controls">
                <select name="style" class="style">
                    <option value="1" <if condition="$info['style'] == 1">selected</if>>单选</option>
                    <option value="2" <if condition="$info['style'] == 2">selected</if>>多选</option>
                </select>
            </div>
        </div>

        <!--  选项  -->
        <div class="form-item">
            <label class="item-label">选项<span class="check-tips"><span class="addBtn">添加选项</span></span></label>
            <div class="controls con_option">

            </div>
        </div>

        <!--  易错频率等级  -->
        <div class="form-item">
            <label class="item-label">易错频率等级</label>
            <div class="controls">
                <label><input type="radio" name="error_level" value="0" <if condition="$info['error_level'] == 0">checked</if>> 无</label>
                <label><input type="radio" name="error_level" value="1" <if condition="$info['error_level'] == 1">checked</if>> 较高</label>
                <label><input type="radio" name="error_level" value="2" <if condition="$info['error_level'] == 2">checked</if>> 特高</label>
                <label><input type="radio" name="error_level" value="3" <if condition="$info['error_level'] == 3">checked</if>> 极高</label>
            </div>
        </div>

        <!--  解析  -->
        <div class="form-item">
            <label class="item-label">解析</label>
            <div class="controls">
                <textarea name="analysis" cols="50" rows="10">{$info.analysis}</textarea>
            </div>
        </div>

        <input type="hidden" class="option_data" name="option" value='{$info.option}'>
        <input type="hidden" value="{:I('id')}" name="id" />
        <div class="form-item">
            <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
            <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
        </div>
    </form>
</block> 

<block name="script">
    <script type="text/javascript">
        $(function (){
            readerOption();

            var subject_list = {$subject_list_json};
            var sid = "{$info.sid}";
            var one_chapter_id = "{$info.one_chapter_id}";
            var two_chapter_id = "{$info.two_chapter_id}";

            if(subject_list.length > 0) {
                var option = "<option value='0'>请选择章节</option>";
                var two_option = "<option value='0'>请选择知识点</option>";
                //渲染学科下拉列表
                for (var i = 0; i < subject_list.length; i++) {
                    if (subject_list[i].id == sid) {
                        chapter_list = subject_list[i].chapter_list;
                        //渲染章节下拉列表
                        for (var j = 0; j < subject_list[i].chapter_list.length; j++) {
                            var obj = subject_list[i].chapter_list[j];
                            var one_selected = '';
                            if (one_chapter_id == obj.id) one_selected = 'selected';
                            option += "<option value='" + obj.id + "' " + one_selected + ">" + obj.name + "</option>";

                            if(one_chapter_id == obj.id){
                                var two_chapter_list = obj.son_list;
                                if (two_chapter_list.length > 0) {
                                    //渲染知识点下拉列表
                                    for (var k = 0; k < two_chapter_list.length; k++) {
                                        var two_obj = two_chapter_list[k];
                                        var two_selected = '';
                                        if (two_chapter_id == two_obj.id) two_selected = 'selected';
                                        two_option += "<option value='" + two_obj.id + "' " + two_selected + ">" + two_obj.name + "</option>";
                                    }
                                }
                            }
                        }
                        break;
                    }
                }
                $('.one_chapter').html(option);
                $('.two_chapter').html(two_option)
            }
        })

        $('.subject').change(function (){
            var subject_list = {$subject_list_json};
            var sid = $(this).val();

            if(subject_list.length > 0){
                var option = "<option value='0'>请选择章节</option>";
                for(var i = 0; i < subject_list.length; i++){
                    if(subject_list[i].id == sid){
                        chapter_list = subject_list[i].chapter_list;
                        for (var j = 0; j < subject_list[i].chapter_list.length; j++) {
                            var obj = subject_list[i].chapter_list[j];
                            option += "<option value='"+ obj.id +"'>"+ obj.name +"</option>";
                        }
                        break;
                    }
                }
                $('.one_chapter').html(option);
                $('.two_chapter').html('<option value="0">请选择知识点</option>')
            }
        })

        var chapter_list = [];
        $('.one_chapter').change(function (){
            var one_chapter_id = $(this).val();
            if(chapter_list.length){
                var option = "<option value='0'>请选择知识点</option>";
                for(var i = 0; i < chapter_list.length; i++){
                    if(chapter_list[i].id == one_chapter_id){
                        for (var j = 0; j < chapter_list[i].son_list.length; j++) {
                            var obj = chapter_list[i].son_list[j];
                            option += "<option value='"+ obj.id +"'>"+ obj.name +"</option>";
                        }
                        break;
                    }
                }
                $('.two_chapter').html(option);
            }
        })
        var option_data = '{$info.option}';
        option_data = option_data ? JSON.parse(option_data) : [];
        $('.addBtn').click(function (){
            var style = $('.style').val();
            if(style == 1){
                //单选
                var str = '<div class="option">\n' +
                    '                    <input type="radio" class="radio" name="radio"  onclick="clickRadio(this)">\n' +
                    '                    <input type="text" class="text input-large value" oninput="changeValue(this)" placeholder="请输入选项内容">\n' +
                    '                    <span class="delBtn" onclick="delOption(this)">删除</span>\n' +
                    '                </div>';
            }else{
                //多选
                var str = '<div class="option">\n' +
                    '                    <input type="checkbox" class="checkbox" onclick="clickCheckbox(this)">\n' +
                    '                    <input type="text" class="text input-large value" oninput="changeValue(this)" placeholder="请输入选项内容">\n' +
                    '                    <span class="delBtn" onclick="delOption(this)">删除</span>\n' +
                    '                </div>';
            }
            var single_option = {"key": "", "value": "", "answer": false, "is_choose": false};
            option_data.push(single_option)
            formatOption();

            if($('.option').length > 0){
                $('.option').last().after(str);
            }else{
                $('.con_option').append(str);
            }

            $('.option_data').val(JSON.stringify(option_data))
        })

        function clickRadio(that)
        {
            var index = $('.radio').index(that);
            option_data[index].answer = true;

            $('.option_data').val(JSON.stringify(option_data))
        }

        function clickCheckbox(that)
        {
            var index = $('.checkbox').index(that);
            option_data[index].answer = !option_data[index].answer;

            $('.option_data').val(JSON.stringify(option_data))
        }

        function formatOption()
        {
            var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
            if(option_data.length > 0){
                for(var i = 0; i < option_data.length; i++){
                    option_data[i].key = arr[i];
                }
            }
        }

        $('.style').change(function (){
            if(option_data.length > 0) {
                for (var i = 0; i < option_data.length; i++) {
                    option_data[i].answer = false;
                }
            }

            readerOption();

        })

        function changeValue(that){
            var index = $('.value').index(that);
            option_data[index].value = $(that).val();
            $('.option_data').val(JSON.stringify(option_data))

        }

        function delOption(that)
        {
            var index = $('.delBtn').index(that);
            option_data.splice(index, 1);
            $('.option').eq(index).remove();
            formatOption();

            $('.option_data').val(JSON.stringify(option_data))
        }

        function readerOption()
        {
            var str = '';
            if(option_data.length > 0){
                var style = $('.style').val();
                for(var i = 0; i < option_data.length; i++){
                    var checked = '';
                    if(option_data[i].answer) checked = 'checked';
                    if(style == 1){
                        str += '<div class="option">\n' +
                            '                    <input type="radio" class="radio" name="radio"  '+ checked +' onclick="clickRadio(this)">\n' +
                            '                    <input type="text" class="text input-large value" oninput="changeValue(this)" value="'+ option_data[i].value +'" placeholder="请输入选项内容">\n' +
                            '                    <span class="delBtn" onclick="delOption(this)">删除</span>\n' +
                            '                </div>';
                    }else{
                        str += '<div class="option">\n' +
                            '                    <input type="checkbox" class="checkbox" '+ checked +' onclick="clickCheckbox(this)">\n' +
                            '                    <input type="text" class="text input-large value" oninput="changeValue(this)" value="'+ option_data[i].value +'" placeholder="请输入选项内容">\n' +
                            '                    <span class="delBtn" onclick="delOption(this)">删除</span>\n' +
                            '                </div>';
                    }
                }
            }
            $('.con_option').html(str);
        }

        //导航高亮
        highlight_subnav('{:U("Manage/exercisesList")}');
    </script>
</block>